<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">
            <el-form-item label="员工工号" prop="staffNo">
                <el-input v-model="queryParams.staffNo" placeholder="请输入工号" clearable size="small"
                          @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="员工姓名" prop="username">
                <el-input v-model="queryParams.username" placeholder="请输入姓名" clearable size="small"
                          @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="部门名称" prop="deptName">
                <el-input v-model="queryParams.deptName" placeholder="请输入部门名称" clearable size="small"
                          @keyup.enter.native="handleQuery"
                />
            </el-form-item>

            <el-form-item label="项目代码" prop="projectCode">
                <el-input v-model="queryParams.projectCode" placeholder="请输入项目代码" clearable size="small"
                          @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="阅卷状态" prop="readStatus">
                <el-select v-model="queryParams.readStatus" placeholder="阅卷状态" clearable size="small">
                    <el-option v-for="dict in readPaperStatusOptions"
                               :key="dict.code"
                               :label="dict.name"
                               :value="dict.code"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="考试日期">
                <el-date-picker v-model="dateRange" size="small" style="width: 240px"
                                value-format="yyyy-MM-dd" type="daterange" range-separator="-"
                                start-placeholder="开始日期" end-placeholder="结束日期"
                ></el-date-picker>
            </el-form-item>
            <el-form-item style="margin-left: 10px;">
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" style="margin-left: 10px;" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-table v-loading="loading" :data="scoreList" @selection-change="handleSelectionChange">
            <!--            <el-table-column type="selection" width="55" align="center" />-->
            <el-table-column label="序号" align="center" type="index" :show-overflow-tooltip="false"/>
            <el-table-column label="工号" align="center" prop="staffNo" :show-overflow-tooltip="true"/>
            <el-table-column label="姓名" align="center" prop="username" :show-overflow-tooltip="true"/>
            <el-table-column label="部门" align="center" prop="deptName" :show-overflow-tooltip="true"/>
            <el-table-column label="项目代码" align="center" prop="projectCode"/>
            <el-table-column label="考试日期" align="center" width="100" prop="examDate" />
            <el-table-column label="机考成绩" align="center" prop="theoryScore" :show-overflow-tooltip="true"/>
            <el-table-column label="阅卷状态" align="center" prop="readStatus" :formatter="readStatusFormat"/>
            <el-table-column label="阅卷时间" align="center" width="165" prop="readDate"/>
            <el-table-column label="操作" align="center" class-name="small-padding">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-edit"
                               v-if="scope.row.readStatus === '0' ? false : true"
                               @click="handleReadPaper(scope.row,3)"
                    >批阅</el-button>
                    <el-button size="mini" type="text" icon="el-icon-view"
                               v-if="scope.row.readStatus === '0' ? true : false"
                               @click="handleReadPaper(scope.row,4)"
                    >详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination
                v-show="total>0"
                :total="total"
                :page.sync="pageParams.page"
                :limit.sync="pageParams.rows"
                @pagination="getList"
        />
    </div>
</template>

<script>
    import {personReadPaper} from "@/api/exam/scoreInfo";
    export default {
        name: "readPaper",
        components: {

        },
        data() {
            return {
                // 遮罩层
                loading: true,
                // 选中数组
                ids: [],
                // 非单个禁用
                single: true,
                // 非多个禁用
                multiple: true,
                // 显示搜索条件
                showSearch: true,
                // 总条数
                total: 0,
                // 成绩表格数据
                scoreList: [],
                // 阅卷状态据字典
                readPaperStatusOptions: [],
                // 日期范围
                dateRange: [],
                // 分页参数
                pageParams: {
                    page: 1,
                    rows: 10,
                },
                // 查询参数
                queryParams: {
                    staffNo: undefined,
                    username: undefined,
                    deptName: undefined,
                    projectCode: undefined,
                    readStatus: undefined,
                    status: undefined,
                    scoreType: '0',// 0:考试类型成绩批阅
                },
            };
        },
        created() {
            this.getList();
            //查询阅卷状态字典状态
            this.getDicts("read_paper_status").then(response => {
                this.readPaperStatusOptions = response.responseBody.result;
            });
            this.getList();
        },
        methods: {
            /** 查询成绩列表 */
            getList() {
                this.loading = true;
                personReadPaper({
                    'pageParameter': this.pageParams,
                    'searchParams': this.addDateRange(this.queryParams, this.dateRange)
                }).then(response => {
                    this.scoreList = response.responseBody.result;
                    this.total = response.responseBody.pageParameter.totalCount;
                    this.loading = false;
                });
            },
            // 阅卷状态字典翻译
            readStatusFormat(row, column) {
                return this.selectDictLabel(this.readPaperStatusOptions, row.readStatus);
            },
            // 表单重置
            reset() {
                this.form = {
                    staffNo: undefined,
                    username: undefined,
                    deptName: undefined,
                    projectCode: undefined,
                    status: undefined,
                    scoreType: undefined
                };
                this.resetForm("form");
            },
            /** 搜索按钮操作 */
            handleQuery() {
                this.pageParams.pageNum = 1;
                this.getList();
            },
            /** 重置按钮操作 */
            resetQuery() {
                this.resetForm("queryForm");
                this.dateRange = [];
                this.handleQuery();
            },
            // 多选框选中数据
            handleSelectionChange(selection) {
                this.ids = selection.map(item => item.scoreId)
                this.single = selection.length != 1
                this.multiple = !selection.length
            },
            /** 试卷批阅 */
            handleReadPaper(row,examType) {
                var paperId = row.paperId;
                var signUpId = row.signUpId;
                var examPlanId = row.examPlanId;
                // 打开新页面--》批阅页面
                var routeUrl = this.$router.resolve({
                    //'&paperType='+paperType+  examType=3: 阅卷   4：查看
                    path: '/read-paper-form?paperId='+paperId+'&examType='+examType+'&planId='+examPlanId+'&signUpId='+signUpId// 这里的路径就可以正常的写，不需要添加_blank: true
                })
                window.open(routeUrl.href, '_blank');
            },
        }
    };
</script>
